<template>
  <div class="login-wrap">
    <div class="login-inner">
      <a-row>
        <a-col :xl="0" :md="0" :sm="24" :xs="24">
          <transition appear appear-active-class="animated bounceInLeft">
            <div class="m-right-info">
              <h2>中后台管理系统</h2>
            </div>
          </transition>
        </a-col>
        <a-col :xl="12" :md="12" :sm="0" :xs="0">
          <transition appear appear-active-class="animated bounceInLeft">
            <div class="right-info">
              <h2>中后台管理系统</h2>
              <img
                src="http://demo.gin-vue-admin.com/static/img/login_left.b6bb2261.svg"
                alt=""
              />
            </div>
          </transition>
        </a-col>
        <a-col :xl="12" :md="12" :sm="24" :xs="24">
          <transition appear appear-active-class="animated bounceInRight">
            <div class="login-form">
              <h2 key="1">登录</h2>
              <a-form-model
                key="2"
                :model="form"
                ref="loginForm"
              >
                <a-form-model-item>
                  <a-input
                    v-model="form.username"
                    placeholder="Username"
                    size="large"
                  >
                    <a-icon
                      slot="prefix"
                      type="user"
                      style="color:rgba(0,0,0,.25)"
                    />
                  </a-input>
                </a-form-model-item>
                <a-form-model-item>
                  <a-input
                    v-model="form.password"
                    type="password"
                    placeholder="Password"
                    size="large"
                  >
                    <a-icon
                      slot="prefix"
                      type="lock"
                      style="color:rgba(0,0,0,.25)"
                    />
                  </a-input>
                </a-form-model-item>
                <a-form-model-item>
                  <a-row>
                    <a-col  :span="14">
                      <a-input
                        v-model="form.code"
                        type="password"
                        placeholder="Password"
                        size="large"
                      >
                        <a-icon
                          slot="prefix"
                          type="lock"
                          style="color:rgba(0,0,0,.25)"
                        />
                      </a-input>
                    </a-col>
                    <a-col :span="10" :style="{ textAlign: 'right' }">
                      <img class="login-code" :src="code" alt="">
                    </a-col>
                  </a-row>
                </a-form-model-item>
                <a-form-model-item>
                  <a-button
                    block
                    size="large"
                    type="primary"
                    @click="handleSubmit('loginForm')"
                    :disabled="form.username === '' || form.password === '' || form.code === ''"
                  >
                    登录
                  </a-button>
                </a-form-model-item>
              </a-form-model>
            </div>
          </transition>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import LoginMinix from '@/mixins/system/login'
export default {
  name: "login",
  mixins:[LoginMinix]
  
};
</script>
<style lang="less" scoped>
.login-wrap {
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(http://demo.gin-vue-admin.com/static/img/login_background.5bc6055a.svg)
    no-repeat center;
  background-size: cover;
  position: relative;
}
.login-inner {
  height: 100%;
  height: 100%;
  padding-top: 200px;
}
.login-wrap:after {
  content: "";
  position: absolute;
  margin-left: -45%;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background-image: url(https://vvbin.cn/next/assets/login-bg.d4cb3417.svg);
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.login-form {
  margin-left: 100px;
  width: 100%;
  max-width: 420px;
  height: 100%;
  padding: 30px 20px;
  border-radius: 8px;
  background: #fff;
}
.login-form > h2 {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 20px;
}
.right-info {
  position: relative;
  z-index: 99;
  width: 80%;
  text-align: center;
}
.right-info > h2 {
  margin-bottom: 30px;
  color: #fff;
  font-size: 30px;
}
.right-info > img {
  max-width: 600px;
  width: 100%;
}
.m-right-info {
  width: 100%;
  color: #333;
  text-align: center;
  margin-bottom: 40px;
}
.login-code{
  width: 90%;
  height: 40px;
}
@media screen and (max-width: 1000px) {
  .login-form {
    margin-left:40px;
  }
}
@media screen and (max-width: 768px) {
  .login-wrap:after {
    display: none;
  }
  .login-form {
    margin-left: 0;
    margin: 0 auto;
  }
  .login-inner {
    padding-top: 80px;
  }
}

</style>
